<template>
  <div class="goodinfo">

    <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
      <div class="ball" v-show="ballfalg" ref="ball"></div>
    </transition>

    <!-- 这是商品轮播图区域 -->
    <div class="mui-card">
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <swiper :lunboList="bannerlist" :isfull=true></swiper>
        </div>
      </div>
    </div>
    <!-- 这是商品购买区域 -->
    <div class="mui-card">

      <div class="mui-card-header">{{ shopinfo.title }}</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner article">
          <p class="price">
            市场价：<del>￥{{ shopinfo.market_price }}</del>&nbsp;&nbsp;&nbsp;销售价：<span
              class="now">￥{{ shopinfo.sell_price }}</span>
          </p>
          <p class="num">
            购买数量： <numbox @getcount="getSelectCount" :max="shopinfo.stock_quantity"></numbox>
          </p>
          <mt-button size="small" type="primary">立即购买</mt-button>
          <mt-button size="small" type="danger" @click="ballcontrator()">加入购物车</mt-button>

        </div>
      </div>
    </div>
    <!-- 这是商品参数区域 -->
    <div class="mui-card">
      <div class="mui-card-header">商品参数</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p>商品货号：{{ shopinfo.goods_no }}</p>
          <p>库存情况：{{ shopinfo.stock_quantity }}</p>
          <p>上架时间：{{ shopinfo.add_time | dataFormat }}</p>
        </div>
      </div>
      <div class="mui-card-footer">
        <mt-button size="large" type="primary" plain @click="godec(id)">图文介绍</mt-button>
        <mt-button size="large" type="danger" plain @click="gocomment(id)">商品评论</mt-button>
      </div>
    </div>
  </div>
</template>


<script>
  import swiper from "../../subcompontents/swiper.vue"
  import numbox from "../../subcompontents/goodinfo_numbox.vue"
  export default {
    data() {
      return {
        id: this.$route.params.id,
        bannerlist: [],
        shopinfo: {},
        ballfalg: false,
        selectedCount: 1
      }
    },
    created() {
      this.getbannerlist();
      this.getinfo()
    },
    methods: {
      getbannerlist() {
        this.$http.get('api/getthumimages/' + this.id).then(result => {
          if (result.body.status === 0) {
            result.body.message.forEach(item => {
              item.img = item.src
            })
            this.bannerlist = result.body.message
          }
        })
      },
      // 获取商品参数
      getinfo() {
        this.$http.get('api/goods/getinfo/' + this.id).then(result => {
          if (result.body.status === 0) {
            this.shopinfo = result.body.message[0]
          }
        })
      },
      godec(id) {
        this.$router.push({
          name: 'goodec',
          params: {
            id
          }
        })
      },
      gocomment(id) {
        console.log(111)
        this.$router.push({
          name: 'goodcomment',
          params: {
            id
          }
        })
      },
      ballcontrator() {
        this.ballfalg = !this.ballfalg;
        // 拼接出一个要保存到vuex中的商品信息对象
        var goodsinfo = {
          id: this.id,
          count: this.selectedCount,
          price: this.shopinfo.sell_price,
          selected: true
        }
        this.$store.commit("addToCar", goodsinfo)

      },
      beforeEnter(el) {
        el.style.transform = "translate(0,0)"
      },
      enter(el, done) {
        el.offsetWidth;

        const ballPosition = this.$refs.ball.getBoundingClientRect();
        const badegePosition = document.getElementById('badge').getBoundingClientRect();

        const x = badegePosition.left - ballPosition.left;
        const y = badegePosition.top - ballPosition.top;
        el.style.transform = `translate(${x}px,${y}px)`
        el.style.transition = "all 0.5s  cubic-bezier(.25,.1,.25,1)"
        done()
      },
      afterEnter(el) {
        this.ballfalg = !this.ballfalg
      },
      getSelectCount(count) {
        this.selectedCount = count;
        console.log('父组件拿到的值为----' + this.selectedCount)
      },
    },
    components: {
      swiper,
      numbox
    }
  }
</script>


<style lang="scss" scoped>
  .goodinfo {
    background-color: #eee;
    overflow: hidden;

    .mint-swipe-item {
      background-size: contain !important;
      background-position: center center;
      background-repeat: no-repeat
    }

    .now {
      font-size: 20px;
      font-weight: bold;
      color: #ef4f4f
    }

    .num {
      display: flex
    }

    .mui-card-footer {
      display: block
    }

    .mint-button {
      margin: 15px 0
    }

    .ball {
      width: 16px;
      height: 16px;
      background: red;
      position: absolute;
      z-index: 99;
      top: 410px;
      display: block;
      border-radius: 50%;
      left: 140px;
    }
  }
</style>